<template>
	<view class="content">
		<!-- 用戶信息區域 -->
		<view class="user-info">
			<image class="avatar" src="/static/logo.png" mode="aspectFill" />
			<view class="info">
				<view class="nickname">用戶名：{{ userInfo.username }}</view>
				<view class="id">VIP: {{ userInfo.id }}</view>
			</view>
		</view>

		<!-- 功能選單 -->
		<view class="menu-list">
			<view class="menu-item" v-for="item in menuItems" :key="item.id" @click="handleMenuClick(item)">
				<view class="item-left">
					<text :class="item.icon" class="icon"></text>
					<text>{{ item.title }}</text>
				</view>
				
				<view class="item-right">
					<text class="right-text">{{ item.rightText }}</text>
					<uni-icons type="right" size="16" />
				</view>
			</view>
		</view>

		<uni-popup ref="popup" type="center">
			<view class="popup-content">
				<view class="popup-title">输入卡密</view>
				<input 
					class="card-input" 
					v-model="cardCode" 
					placeholder="请输入卡密"
					type="text"
				/>
				<view class="popup-buttons">
					<button class="btn cancel" @click="closePopup">取消</button>
					<button class="btn confirm" @click="submitCardCode">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
	
</template>

<script setup lang="ts">
import { ref,onMounted} from 'vue'
import { onPullDownRefresh } from '@dcloudio/uni-app'  // 新增這行引入
import { handleMyData,MyData, MyDataResponse } from '@/api/my'

// 定義用戶信息接口
interface UserInfo {
	id: string
	nickname: string
	avatar: string
}

// 定義菜單項接口
interface MenuItem {
	id: number
	title: string
	icon: string
	path: string
	rightText?: string  // 添加可选的右侧文字属性
}

// 定義版本信息接口
interface VersionInfo {
	version: string
	forceUpdate: boolean
	downloadUrl: string
	description: string
}

// 用戶信息
const userInfo = ref<MyData>({
	id: 888,
	username: '測試用戶',
	viptime: '2025-03-15'
})

// 菜單列表
const menuItems = ref<MenuItem[]>([
	{
		id: 1,
		title: '提示設置',
		icon: 'iconfont icon-tishi',
		path: '/pages/order/list',
		rightText: '已開啟'
	},
	{
		id: 2,
		title: '在線充值',
		icon: 'iconfont icon-chongzhi',
		path: '/pages/address/list',
		rightText: '充值優惠'
	},
	{
		id: 3,
		title: '卡密支付',
		icon: 'iconfont icon-qiamizhifu',
		path: '/pages/address/list'
	},
	{
		id: 4,
		title: '系統設置',
		icon: 'iconfont icon-xitongshezhi',
		path: '/pageMy/setting',
		rightText: ''
	},
	{
		id: 5,
		title: '檢查更新',
		icon: 'iconfont icon-gengxin',
		path: '/pages/settings/index',
		rightText: `當前版本 ${process.env.VUE_APP_VERSION || '1.0.0'}`
	}
])

// 生命週期鉤子
onMounted(async() => {
	const res:MyDataResponse = await handleMyData();
		userInfo.value = res.data
	// fetchList() // 頁面加載時獲取列表
	
})

// 刷新用戶信息
const refreshUserInfo = async () => {
	try {
		// 這裡添加獲取用戶信息的API調用
		const res:MyDataResponse = await handleMyData();
		userInfo.value = res.data
		
		
		// 完成後停止下拉刷新
		uni.stopPullDownRefresh()
	} catch (error) {
		console.error('刷新用戶信息失敗：', error)
		uni.stopPullDownRefresh()
	}
}

// 下拉刷新處理函數
onPullDownRefresh(() => {  // 修改這裡：直接使用onPullDownRefresh
    refreshUserInfo()
})

// 檢查版本更新
const checkUpdate = async () => {
	try {
		// 模擬調用後端API檢查版本
		// const res = await api.checkVersion()
		const mockNewVersion: VersionInfo = {
			version: '1.1.0',
			forceUpdate: false,
			downloadUrl: 'https://example.com/download',
			description: '1. 優化用戶體驗\n2. 修復已知問題'
		}
		
		const currentVersion = process.env.VUE_APP_VERSION || '1.0.0'
		
		if (mockNewVersion.version > currentVersion) {
			uni.showModal({
				title: '發現新版本',
				content: mockNewVersion.description,
				confirmText: '立即更新',
				cancelText: mockNewVersion.forceUpdate ? '' : '暫不更新',
				success: (res) => {
					if (res.confirm) {
						// 打開下載鏈接
						plus.runtime.openURL(mockNewVersion.downloadUrl)
					} else if (!mockNewVersion.forceUpdate) {
						uni.showToast({ title: '已取消更新', icon: 'none' })
					}
				}
			})
		} else {
			uni.showToast({ title: '已是最新版本', icon: 'none' })
		}
	} catch (error) {
		console.error('檢查更新失敗：', error)
		uni.showToast({ title: '檢查更新失敗', icon: 'none' })
	}
}

// 添加以下代码
const popup = ref<any>(null)
const cardCode = ref('')

// 修改handleMenuClick函数中的case 3部分
const handleMenuClick = (item: MenuItem) => {
	switch (item.id) {
		case 3:
			popup.value.open()
			break
		case 5:
			checkUpdate()
			return
			break;
		default:
		uni.navigateTo({
			url: item.path
		})
	}
	
}

// 添加以下函数
const closePopup = () => {
	popup.value.close()
	cardCode.value = ''
}

const submitCardCode = async () => {
	if (!cardCode.value) {
		uni.showToast({
			title: '请输入卡密',
			icon: 'none'
		})
		return
	}
	
	try {
		// 这里添加卡密验证的API调用
		// const res = await validateCardCode(cardCode.value)
		
		// 模拟API调用
		await new Promise(resolve => setTimeout(resolve, 1000))
		
		uni.showToast({
			title: '卡密使用成功',
			icon: 'success'
		})
		closePopup()
	} catch (error) {
		uni.showToast({
			title: '卡密验证失败',
			icon: 'none'
		})
	}
}
</script>

<style lang="scss" scoped>
.content {
	min-height: 100vh;
	background-color: #f5f5f5;
}

.user-info {
	display: flex;
	align-items: center;
	padding: 20px;
	background-color: #ffffff;
	
	.avatar {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		margin-right: 20px;
	}
	
	.info {
		.nickname {
			font-size: 18px;
			font-weight: bold;
		}
		
		.id {
			font-size: 16px;
			color: #444;
			padding-top: 15px;
		}
	}
}

.menu-list {
	margin-top: 10px;
	background-color: #ffffff;
	
	.menu-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 20px;
		border-bottom: 1px solid #eee;
		
		.item-left {
			display: flex;
			align-items: center;
			font-size: 15px;
			.icon {
				font-size: 18px;
				margin-right: 10px;
				color: #444;
			}
		}
		
		.item-right {
			display: flex;
			align-items: center;
			
			.right-text {
				font-size: 14px;
				color: #999;
				margin-right: 5px;
			}
		}
	}
}

.popup-content {
	background-color: #fff;
	border-radius: 10px;
	width: 280px;
	padding: 20px;
	
	.popup-title {
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 20px;
	}
	
	.card-input {
		height: 40px;
		border: 1px solid #ddd;
		border-radius: 4px;
		padding: 0 10px;
		margin-bottom: 20px;
	}
	
	.popup-buttons {
		display: flex;
		justify-content: space-between;
		
		.btn {
			flex: 1;
			margin: 0 5px;
			height: 35px;
			line-height: 35px;
			text-align: center;
			border-radius: 4px;
			font-size: 14px;
			
			&.cancel {
				background-color: #f5f5f5;
				color: #666;
			}
			
			&.confirm {
				background-color: #00B26A;
				color: #fff;
			}
		}
	}
}
</style>